<template>
  <view>

	<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
		<el-tab-pane label="未读消息" name="first" width="50px">
	
			<el-col :span="18">
			  <ul class="infinite-list" v-infinite-scroll="load" style="overflow:visible;">
			  	<li v-for="message in notReadMessage" class="infinite-list-item" style="width: 400px;">
					<view class="message" @click="viewNotReadMessage(message)">
						<el-card shadow="always" style="height: 100%;width: 400px;margin-bottom: 10px;">
							<view class="custom" @click="showCustomDetail(contract.id)">
								<table style="width: 400px;">
									<tr>
										<td>客户消息：</td>
										<td>{{ message.sendTime }}</td>
									</tr>
									<tr>
										<td>{{ message.customCompany }}</td>
										<td>{{ message.customName }} 共享给你</td>
									</tr>
								</table>
							</view>
						</el-card>
					</view>
			  	</li>
			  </ul>
			</el-col>
			
		</el-tab-pane>
		
		<el-tab-pane label="已读消息" name="second">
			
			<el-col :span="18">
			  <ul class="infinite-list" v-infinite-scroll="load" style="overflow:visible;">
			  	<li v-for="message in readMessage" class="infinite-list-item" style="width: 100%;">
					<view class="message" @click="viewReadMessage(message)">
						<el-card shadow="always" style="height: 100%;width: 400px;margin-bottom: 10px;">
							<view class="custom" @click="showCustomDetail(contract.id)">
								<table style="width: 400px;">
									<tr>
										<td>客户消息：</td>
										<td>{{ message.sendTime }}</td>
									</tr>
									<tr>
										<td>{{ message.customCompany }}</td>
										<td>{{ message.customName }} 共享给你</td>
									</tr>
								</table>
							</view>
						</el-card>
					</view>
			  	</li>
			  </ul>
			</el-col>
			
		</el-tab-pane>
		
		<el-tab-pane label="已删除" name="third" width="50px">
			<ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto" i>
				
			</ul>
		</el-tab-pane>
	</el-tabs>
  </view>
  
</template>

<script>
  export default {
    data() {
      return {
		 activeName: 'first',
		 id: 0,
         readMessage: [],
		 notReadMessage: []
      }
    },
	onLoad() {
		this.id = uni.getStorageSync('id');
		console.log(this.id); 
		// 获取用户已读消息
		uni.request({
		    url: 'http://localhost:8089/crmdemo/message/queryReadMessage', //仅为示例，并非真实接口地址。
		    data: {
		        userId: this.id
		    },
		    success: (res) => {
		        console.log(res);
		        if(res.data.status == "000000"){
					this.readMessage = res.data.result
		        }else{
					this.$modal.msgError("获取用户已读消息失败")
				} 
		    }
		});
		// 获取用户未读读消息
		uni.request({
		    url: 'http://localhost:8089/crmdemo/message/queryNotReadMessage', //仅为示例，并非真实接口地址。
		    data: {
		        userId: this.id
		    },
		    success: (res) => {
		        console.log(res);
		        if(res.data.status == "000000"){
					this.notReadMessage = res.data.result
		        }else{
					this.$modal.msgError("获取用户已读消息失败")
				} 
		    }
		});
	},
    methods: {
		viewNotReadMessage(message) {
			console.log(message.id + message.content)
			// 更新消息为已读状态
			uni.request({
			    url: 'http://localhost:8089/crmdemo/message/updateMessageStatus',
			    data: {
			        messageId: message.id
			    },
			    success: (res) => {
			        console.log(res);
			        if(res.data.status == "000000"){
						console.log(res.data.result);
			        }else{
						this.$modal.msgError("更新消息状态失败")
					} 
			    }
			});
			// 跳转到阅读消息界面
			uni.reLaunch({
				url: 'messageInfo?customName='+message.customName+'&customCompany='+message.customCompany+'&sendTime='+message.sendTime+'&content='+message.content
			})
			// uni.navigateTo({
			// 	url: 'messageInfo?content=' + content
			// });
		},
		viewReadMessage(message) {
			uni.reLaunch({
				url: 'messageInfo?customName='+message.customName+'&customCompany='+message.customCompany+'&sendTime='+message.sendTime+'&content='+message.content
			})
		}
    }
  }
</script>

<style lang="scss">
	ul {
		list-style: none;
	}
	li {
		margin-right: 50px;
	}
	table {
		width: 290px;
		border-bottom: 1px solid silver;
	}
	td {
		padding: 5px;
	}
	tr {
		padding: 10px;
	}
	.message {
		margin-bottom: 10px;
	}
 page{
	 background-color: white;
 }
   .des{
	       width: 100%;
   }
</style>
